<template>
  <div>
    <el-form label-position="right" label-width="80px">
      <el-form-item label="试题类型">
        <el-row>
          <el-button
            :type="issue.type == 1 ? 'info' : ''"
            round
            @click="changeType(1)"
            >单选题</el-button
          >
          <el-button
            :type="issue.type == 2 ? 'info' : ''"
            round
            @click="changeType(2)"
            >多选题</el-button
          >
          <el-button
            :type="issue.type == 3 ? 'info' : ''"
            round
            @click="changeType(3)"
            >判断题</el-button
          >
          <el-button
            :type="issue.type == 4 ? 'info' : ''"
            round
            @click="changeType(4)"
            >填空题</el-button
          >
          <el-button
            :type="issue.type == 5 ? 'info' : ''"
            round
            @click="changeType(5)"
            >问答题</el-button
          >
        </el-row>
      </el-form-item>
      <el-form-item label="试题题干">
        <el-input
          type="textarea"
          rows="5"
          style="width: 500px"
          v-model="issue.content"
        ></el-input>
      </el-form-item>
      <el-form-item label="选项设置" v-if="issue.type == 1 || issue.type == 2">
        <!-- 动态生成选项 -->
        <div v-for="(val, key, index) in issue.answer.options" :key="index">
          <h3>(选项{{ key }})</h3>
          <el-input
            type="textarea"
            rows="5"
            style="width: 500px"
            v-model="issue.answer.options[key]"
          ></el-input>
        </div>
        <div></div>
        <el-button type="info" @click="addoption">添加选项</el-button>
      </el-form-item>
      <el-form-item label="正确答案" v-if="issue.type == 1 || issue.type == 2">
        <el-checkbox-group v-model="answerList">
          <el-checkbox
            v-for="(val, key, index) in issue.answer.options"
            :key="index"
            :label="key"
            @change="pushOne"
            >{{ key }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="正确答案" v-if="issue.type == 3 || issue.type == 4 || issue.type == 5">
        <el-input
          type="textarea"
          rows="5"
          style="width: 500px"
          v-model="issue.answer.answer"
        ></el-input>
      </el-form-item>
      <el-form-item label="答案解析">
        <el-input
          type="textarea"
          rows="5"
          style="width: 500px"
          v-model="issue.answer.detail"
        ></el-input>
      </el-form-item>
      <el-form-item label="难度">
        <el-radio-group v-model="issue.level">
          <el-radio  :label="1">简单</el-radio>
          <el-radio  :label="2">中等</el-radio>
          <el-radio  :label="3">困难</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="科目年级">
        <el-select
          v-model="issue.pool.poolName"
          placeholder="请选择科目"
          @change="getSons"
        >
          <el-option
            v-for="(grades, subject, index) in subjects"
            :key="index"
            :label="subject"
            :value="subject"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="issue.sonPool.poolName"
          style="margin-left: 20px"
          placeholder="请选择年级"
        >
          <el-option
            v-for="(grade, index) in grades"
            :key="index"
            :label="grade"
            :value="grade"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-button type="success" plain style="margin-left: 150px"
          >取消</el-button
        >
        <el-button type="info" plain @click="save()">保存</el-button>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { postData } from "@/utils/Util";

export default {
  data() {
    return {
      issue: {
        answer: {
          answer: "",
          createMan: "",
          create_time: "",
          detail: "",
          mapOptions: "",
          options: {
            A: "",
            B: "",
            C: "",
            D: "",
          },
        },
        content: "",
        createMan: "",
        createTime: "",
        id: "",
        is_add: "",
        is_delete: "",
        level: "",
        pool: {
          poolName: "",
        },
        sonPool: {
          poolName: "",
        },
        type: "",
        updateMan: "",
        updateTime: "",
      },
      subjects: {},
      grades: [],
      answerList: [],
    };
  },
  methods: {
    changeType(num) {
      this.issue.type = num;
    },
    save() {
      if (this.$route.query.id) {
        this.$axios
          .post("http://localhost:8080/issue/updateIssue", this.issue)
          .then((res) => {
            this.$message(res.data.message);
            //路由跳转
            this.$router.push("/issue/list/");
          });
      } else {
        this.$axios
          .post("http://localhost:8080/issue/addOne", this.issue)
          .then((res) => {
            console.log(res);
            this.$message("添加成功");
            //跳转路由页面
            this.$router.push("/issue/list/");
          });
      }
    },
    getSons(subject) {
      this.grades = this.subjects[subject];
    },
    addoption() {
      //获取json对象的长度
      let size = Object.keys(this.issue.answer.options).length;
      var n = 65 + size;
      let num = String.fromCharCode(n) + "";
      this.$set(this.issue.answer.options, num, "");
    },
    //给答案啊添加选项
    pushOne() {
      this.issue.answer.answer = this.answerList.join(",");
      console.log(this.issue.answer.answer);
    },
  },
  created() {
    //发送请求获取动态菜单
    this.$axios.post("http://localhost:8080/pool/findfpool").then((res) => {
      this.subjects = res.data.data;
    });
    //如果是跳转过来的路由，就是要获取修改的记录id
    if (this.$route.query.id) {
      //根据id去查询该题的信息，包括科目，年级
      this.$axios
        .post(
          "http://localhost:8080/issue/findIssueById/" + this.$route.query.id
        )
        .then((res) => {
          this.$message("开始修改");
          this.issue.answer = res.data.data.answer1;
          //下面这个为json字符串->json对象，弱语法，键可以不是字符串
          this.issue.answer.options = eval(
            "(" + this.issue.answer.options + ")"
          );
          this.answerList = this.issue.answer.answer.split(",");
          this.issue.content = res.data.data.content;
          this.issue.id = res.data.data.id;
          this.issue.level = res.data.data.level;
          this.issue.pool = res.data.data.pool;
          this.issue.sonPool = res.data.data.sonPool;
          this.issue.type = res.data.data.type;
        });
    }
  },
};
</script>